<template>
  <taskCard />
  <nut-form ref="formRef" :model-value="formData">
    <nut-form-item
      label="手机号"
      prop="tel"
      required
      :rules="[
        { required: true, message: '请填写绑定电话' },
        { validator: asyncValidator, message: '电话格式不正确' },
      ]"
    >
      <nut-input v-model="formData.tel" placeholder="请填写绑定电话" type="text" />
    </nut-form-item>
    <nut-form-item
      label="验证码"
      prop="code"
      required
      :rules="[{ required: true, message: '请填写短信验证码' }]"
    >
      <nut-input v-model="formData.code" placeholder="请填写短信验证码" clearable>
        <template #left>
          <Ask></Ask>
        </template>
        <template #right>
          <nut-button :type="codeprimary" @click="getCode(formData.tel)" size="small">{{msg}}</nut-button>
        </template>
      </nut-input>
    </nut-form-item>
    <nut-space style="margin: 10px">
      <nut-button type="primary" size="small" @click="submit">{{loginmsg}}</nut-button>
      <nut-button size="small" @click="reset">重置提示状态</nut-button>
      <nut-button
        size="small"
        @click="Taro.navigateTo({ url: '/pages/map/index' })"
        >测试地图</nut-button
      >
      <nut-button
        size="small"
        @click="Taro.navigateTo({ url: 'pages/task/index' })"
        >测试首页</nut-button
      >
    </nut-space>
  </nut-form>
</template>
<script setup>
import { ref,onMounted } from "vue";
import { login ,getCode} from "../../utils/api";
import Taro from "@tarojs/taro";
const formData = ref({
  tel: "",
  code: "",
});
const loginmsg = ref("登录");

const formRef = ref(null);

const reset = () => {
  formRef.value?.reset();
};

const submit = () => {
  formRef.value?.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log("success:", formData.value);
      login(formData.value).then((res) => {
        console.log(res);
      });
    } else {
      console.warn("error:", errors);
    }
  });
};
// 失去焦点校验
const customBlurValidate = (prop) => {
  formRef.value?.validate(prop).then(({ valid, errors }) => {
    if (valid) {
      console.log("success:", formData.value);
    } else {
      console.warn("error:", errors);
    }
  });
};
// 函数校验
//
const customValidator = (val) => {
  if (/^\d+$/.test(val)) {
    return Promise.resolve();
  } else {
    return Promise.reject("必须输入数字");
  }
};
const customRulePropValidator = (val, rule) => {
  if (rule.reg.test(val)) {
    return Promise.resolve();
  } else {
    return Promise.reject("必须输入数字");
  }
};
const nameLengthValidator = (val) => {
  if (val.length > 2) {
    return Promise.resolve();
  } else {
    return Promise.reject("名称两个字以上");
  }
};
// Promise 异步校验
const asyncValidator = (val) => {
  const telReg = /^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/;
  return new Promise((resolve, reject) => {
    console.log("模拟异步验证中...");
    setTimeout(() => {
      if (!val) {
        reject("请输入联系电话");
      } else if (!telReg.test(val)) {
        reject("联系电话格式不正确");
      } else {
        resolve("");
      }
    }, 1000);
  });
};
const codeprimary = ref("info");
const msg = ref("获取验证码");
onMounted(() => {
  // 如果含有token 跳转到my
  if (Taro.getStorageSync("token") != "") {
    Taro.switchTab({ url: "/pages/task/index" });
  }
})
</script>
